<template>
	<view class="popup-layer" v-show="show" @click="layerClose">
		<view class="popup-content" :style="extraStyle">
			<view class="popup-title" v-if="title">{{title}}</view>
			<view class="popup-tip" v-if="tipText">{{tipText}}</view>
			<slot v-else></slot>
		</view>
		<image v-if="showCloseBtn" @click="closePopup" :src="require('./images/close-popup.svg')" class="close-popup"></image>
	</view>
</template>

<script>
	export default {
		name:"popup",
		externalClasses: ['popup-class'], 
		props:{
			show:false,
			tipText:'',
			title:'',
			extraStyle:'',
			stopClose:false,
			showCloseBtn:false,
		},
		data() {
			return {
				
			};
		},
		methods:{
			layerClose(){
				if(this.showCloseBtn){
					return
				}
				this.$emit('closePopup',false)
			},
			closePopup(){
				this.$emit('closePopup',false)
			}
		}
	}
</script>

<style>
.popup-layer{
	background-color: rgba(0,0,0,.5);
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	bottom: 0;
	top: 0;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.popup-content{
	width: 630rpx;
	background: #fff;
	border-radius: 20rpx;
	overflow: hidden;
}
.popup-tip{
	text-align: center;
	color: #333;
	padding: 48rpx 0;
	line-height: 30rpx;
	height: 126rpx;
	font-size: 26rpx;
	width: 500rpx;
	margin: 0 auto;
}
.popup-title{
	text-align: center;
	color: #333;
	line-height: 30rpx;
	font-size: 26rpx;
	padding: 30rpx 0 21rpx;
}
.popup-main{
	padding: 0 30rpx 30rpx;
}
.close-popup{
	width: 70rpx;
	height: 70rpx;
	margin-top: 30rpx;
}
</style>
